import 'package:flutter/material.dart';

class DeviceListitem extends StatefulWidget {
  final double screenWidth;
  const DeviceListitem({super.key, required this.screenWidth});

  @override
  State<DeviceListitem> createState() => _DeviceListitemState();
}

class _DeviceListitemState extends State<DeviceListitem> {
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.fromLTRB(16, 16, 16, 0),
      padding: EdgeInsets.all(16),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(8),
        color: Color(0xFFFFFFFF),
      ),
      child: Row(
        children: [
          Container(
            width: 80,
            height: 80,
            decoration: BoxDecoration(borderRadius: BorderRadius.circular(10)),
            child: Image.network(
              'https://media.istockphoto.com/id/2153573059/photo/mountain-covered-with-a-coniferous-fir-tree-forest-scenic-landscape-from-carpathian-mountains.webp?b=1&s=612x612&w=0&k=20&c=i8DX-Q3QLZMcklMLoGH2_XWh8zWU375UauVnE5Mrx2M=',
            ),
          ),
          Expanded(
            flex: 1,
            child: Padding(
              padding: EdgeInsets.fromLTRB(16, 0, 0, 0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    "Typhur Dome",
                    style: TextStyle(
                      fontSize: 16,
                      color: Color(0xFF212121),
                      fontFamily: "HelveticaNowDisplay",
                      fontWeight: FontWeight.w700,
                    ),
                  ),
                  Text(
                    "Online",
                    style: TextStyle(
                      fontSize: 13,
                      color: Color(0xFF999999),
                      fontFamily: "HelveticaNowDisplay",
                      fontWeight: FontWeight.w400,
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

class ListViewPage extends StatefulWidget {
  const ListViewPage({super.key});

  @override
  State<ListViewPage> createState() => _ListViewPageState();
}

class _ListViewPageState extends State<ListViewPage> {
  @override
  Widget build(BuildContext context) {
    var screenWidth = MediaQuery.sizeOf(context).width;
    return Scaffold(
      backgroundColor: Color(0xFFF0F0F0),
      body: SafeArea(
        top: true,
        bottom: false,
        child: Column(
          children: [
            CustomHeader(),
            Expanded(
              flex: 1,
              child: ListView(
                children: [
                  DeviceListitem(screenWidth: screenWidth),
                  DeviceListitem(screenWidth: screenWidth),
                  DeviceListitem(screenWidth: screenWidth),
                  DeviceListitem(screenWidth: screenWidth),
                  DeviceListitem(screenWidth: screenWidth),
                  DeviceListitem(screenWidth: screenWidth),
                  DeviceListitem(screenWidth: screenWidth),
                  DeviceListitem(screenWidth: screenWidth),
                  DeviceListitem(screenWidth: screenWidth),
                  DeviceListitem(screenWidth: screenWidth),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class CustomHeader extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(16.0),
      color: Colors.blue, // Header 背景颜色
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Text(
            '自定义 Header',
            style: TextStyle(
              color: Colors.white,
              fontSize: 20,
              fontWeight: FontWeight.bold,
            ),
          ),
          Icon(Icons.notifications, color: Colors.white),
        ],
      ),
    );
  }
}
